.wall{
    background: url(./img/3.jpg);
    background-size: cover;
}

html,body{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body{
    background-color: #000;
    text-align: center;
}
body::before{
    content: "";
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.scene{
    display: inline-block;
    vertical-align:middle;
    perspective: 5px;
    perspective-origin: 50% 50%;
    position: relative;
}

.wrap{
    position: absolute;
    width: 1000px;
    height: 1000px;
    left: -500px;
    top: -500px;
    transform-style: preserve-3d;
    animation: move 15s infinite linear;
}

.wall{
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    animation: fade 12s infinite linear;
}

.wall-right{
    transform: rotateY(90deg) translateZ(500px);  
}

.wall-left{
    transform: rotateY(-90deg) translateZ(500px);  
}
.wall-top{
    transform: rotateX(90deg) translateZ(500px);  
}
.wall-bottom{
    transform: rotateX(-90deg) translateZ(500px);  
}
.wall-back{
    transform: rotateX(180deg) translateZ(500px);  
}

@keyframes move{
    0%{
        transform: translateZ(-500px) rotate(0deg);
    }
    100%{
        transform: translateZ(500px) rotate(0deg);
    }
}

@keyframes fade{
    0%{
        opacity: 0;
    }
    25%{
        opacity: 1;
    }
    75%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}